<template>
  <div class="area">
    <div class="top">
      <img src="@/assets/images/logo2.png" class="col-6" alt="" />
      <h1>学员管理系统</h1>
    </div>
    <div class="row">
      <div class="left">
        <img src="@/assets/images/slogan.png" alt="" />
      </div>
      <div class="form-box">
        <div class="login box">
          <div class="container row header mb-4">
            <h2>欢迎登录</h2>
          </div>
          <form
            action=""
            class="container"
            autocomplete="off"
            @submit.prevent="onSubmit"
          >
            <!-- 账号 -->
            <div class="row mb-4 form-group">
              <span class="iconfont icon-yonghu"></span>
              <input
                type="text"
                class="form-control"
                name="username"
                v-model="username"
              />
            </div>
            <!-- 密码 -->
            <div class="row mb-4 form-group">
              <span class="iconfont icon-mima"></span>
              <input
                type="password"
                class="form-control"
                name="password"
                v-model="password"
              />
            </div>
            <div class="row mb-4">
              <button type="submit" class="btn btn-primary">登录</button>
            </div>
            <div class="row mb-3">
              <router-link to="/register">还没有账号，去注册</router-link>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import "bootstrap/dist/css/bootstrap.min.css";
// import "@/style/common.css";
import { loginAPI } from "@/api/user";
export default {
  data() {
    return {
      username: "value",
      password: "123456",
    };
  },
  methods: {
    async onSubmit(value) {
      const res = await loginAPI({
        username: this.username,
        password: this.password,
      });
      console.log(res);
      if (res.data.code === 0) {
        this.$toast.success(res.data.message);
        setTimeout(() => {
          this.$router.push("/index");
        }, 1500);
        localStorage.setItem("CMS", res.data.token);
      } else if (res.data.code === 1) {
        this.$toast.fail({ message: res.data.message, icon: "like-o" });
      }
    },
  },
};
</script>
  
<style scoped>
html,
body {
  /* background-color: #2b2e3e; */
}

.area {
  width: 800px;
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  transition: box-shadow 0.3s ease;
  border-radius: 4px;
}

.top {
  height: 60px;
  background-color: #2746b1;
}
.top img {
  height: 38px;
  width: 130px;
  margin: 0 20px 6px;
}

.top h1 {
  display: inline-block;
  font-size: 24px;
  margin: 0;
  line-height: 60px;
  color: #d2e2e0;
}

.row {
  display: flex;
}

.left {
  width: 363px;
  height: 358px;
  overflow: hidden;
  margin: 20px;
}
.left img {
  width: 100%;
  height: 100%;
}

.form-box {
  box-sizing: border-box;
  flex: 1;
  padding: 20px;
  position: relative;
}

.box {
  width: 360px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

.header {
  display: flex;
  align-items: center;
}

.header h2 {
  font-size: 22px;
}

.form-group {
  position: relative;
}

.iconfont {
  position: absolute;
  left: 4px;
  top: 6px;
  font-weight: bold;
  color: #a9a9aa;
  width: 36px;
}

input.form-control {
  padding-left: 40px;
}
</style>